<template>
	<view class="">
		<view v-if="list.length != 0">
			<view class="list">
				<checkbox-group @change="checkboxChange">
					<view class="li" v-for="(item, index) in list" :key="index">
						<view class="checkbox">
							<checkbox :value="index + ''" :checked="item.checked" class="checked-box" :id="'label' + index" />
							<label class="label-2" :for="'label' + index" :class="{ active: item.checked }"><image src="/static/img/checked_box.png" /></label>
						</view>
						<view class="shop">
							<image :src="item.image" class="imgthumb" mode="aspectFill" />
							<view class="msg">
								<view class="name black">订单号：{{ item.orderSn }}</view>
								<view class="time gray ">下单时间：{{ item.createdTime }}</view>
								<view v-for="(item1, index1) in item.sku" :key="index1">
									<view class="sizr gray " v-if="index1==0">颜色：{{item1.split(":")[1]}}</view>
									<view class="sizr gray " v-if="index1==1">尺码：{{item1.split(":")[1]}}</view>
								</view>
							</view>				
						</view>
						<view class="genre">
							共1件
							<view class="price">
								合计：
								<text>¥{{item.orderPrice}}</text>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
			<view class="statistics">
				<checkbox-group @change="all">
					<view class="checked">
						<checkbox value="1" class="checked-box" id="addall" />
						<label class="label-2" for="addall" :class="{ active: is_all }"><image src="/static/img/checked_box.png" /></label>
						<text class="all">全选</text>
					</view>
				</checkbox-group>
				<view class="sub" @click="go_order()">订单认领</view>
			</view>
		</view>
		<view v-else class="notavailable">
			<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">没有搜索到结果</view>
		</view>
	</view>
	
	
</template>

<script>
import claim from '../../../servers/agent/order/claim.js';
export default {
	data() {
		return {	
			is_all: false,	
			list:'',
			params:'',
			tmp:[]
		};
	},
	onLoad(option) {
		
		this.params=option.arr
		this.initData();
	},
	methods: {
		all(e) {
			if (this.is_all) {
				this.is_all = false;
				for (var i = 0; i < this.list.length; ++i) {
					const item = this.list[i];
					this.$set(item, 'checked', false);
				}
			} else {
				this.is_all = true;
				for (var i = 0; i < this.list.length; ++i) {
					const item = this.list[i];
					this.$set(item, 'checked', true);
				}
			}
			
		},
		checkboxChange(e) {
			var items = this.list,
				values = e.detail.value;
			for (var i = 0; i < items.length; ++i) {
				const item = items[i];
				if (values.includes(String(i))) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
			if (items.length == values.length) {
				this.is_all = true;
			} else {
				this.is_all = false;
			}
			
		},
		initData() {
			uni.showLoading({
				title: '数据加载中'
			});
			claim
				.canClaimlist(this.params)
				.then(res => {
					if(res.code==200){
						this.list = res.data.map(v => {
							v.image = this.imgCDNUrl + v.productImg;
							var sku = [];
							if (v.productSkuDesp) {
								sku = v.productSkuDesp.split(',');
							}
							v.sku = sku;
							return v;
						});
						
						uni.hideLoading();
					}	
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			
			
			
			
		
			
		
		},
		go_order() {
			var flag = true;
			 var tmp = [],str='';
		
			for(var i=0;i<this.list.length;i++){
				if (this.list[i].checked) {					
					tmp.push(this.list[i].orderId);									
				}
				str=tmp.join(',')
			}
		
			if (tmp.length == 0) {
				uni.showToast({
					title: '请选择要认领的订单',
					icon:'none',
					duration: 2000
				});
				return;
			}
		
			uni.showLoading({
				title: '数据加载中'
			});
			var tt = { orderIds: str};
			// console.log(tmp,JSON.stringify(tt) )
			claim
				.claimOrder(tt)
				.then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						uni.navigateTo({
							url:'./claimok'
						})
						
					}else{
						uni.hideLoading()						
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						
					}
					
					// console.log(this.list);
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		}
	},

	mounted() {
		this.initData();
		
		
		
		// var _this = this;
		// uni.getStorage({
		// 	key: 'agentadvertisinglist',
		// 	success: function(res) {
		// 		_this.params = res.data;
		// 		_this.initData(_this.params);
		// 	}
		// });
	}
};
</script>

<style lang="less" scoped>
.list {
	padding-bottom: 175rpx;
	.li {
		position: relative;
		background: #ffffff;
		padding: 50rpx 20rpx 50rpx 89rpx;
		border-bottom: 1px solid #e1e1e1;
		.checkbox {
			position: absolute;
			top: 50rpx;
			left: 20rpx;
			.checked-box {
				display: none;
			}
			.label-2 {
				display: block;
				width: 44rpx;
				height: 44rpx;
				margin: 84rpx 10rpx;
				border: 1px solid #bd3c8c;
				box-sizing: border-box;
				border-radius: 50%;
				image {
					width: 44rpx;
					height: 44rpx;
					display: none;
					margin: -1px;
				}
			}
			.label-2.active {
				background: #fff;
				image {
					display: block;
				}
			}
		}

		.shop {
			position: relative;
			display: flex;
			flex-direction: row;
			image {
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
			}
			.msg {
				width: 431rpx;
				margin-left: 37rpx;
				line-height: 46rpx;
				.name {
					font-size: 28rpx;
					height: 100rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.type {
					font-size: 26rpx;
				}
				.gray {
					color: #999999;
					font-size: 26rpx;
					line-height: 42rpx;
				}
			}
		}
		.genre {
			padding-top: 54rpx;
			text-align: right;
			color: #999999;
			font-size: 26rpx;
			.price {
				display: inline-block;
				color: #333333;
				margin-left: 29rpx;
				text {
					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}
	.li:nth-last-child(1) {
		border-bottom: none;
	}
}
.statistics {
	position: absolute;
	bottom: 0rpx;
	line-height: 135rpx;
	height: 135rpx;
	width: 100%;
	display: flex;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	border-top: 1px solid #efefef;
	background: #ffffff;
	view {
		position: relative;
		width: 195rpx;
		height: 135rpx;
		line-height: 135rpx;
		border-radius: 40rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.sub {
		top: 25rpx;
		width: 283rpx;
		height: 80rpx;
		background: linear-gradient(80deg, #d2158a, #fc6395);
		color: #fff;
		line-height: 80rpx;
	}
	.checked {
		width: 444rpx;
		text-align: left;
		.checked-box {
			display: none;
		}
		.label-2 {
			display: inline-block;
			width: 44rpx;
			height: 44rpx;
			margin: 45rpx 1rpx;
			border: 1px solid #bd3c8c;
			box-sizing: border-box;
			border-radius: 50%;
			float: left;
			image {
				width: 44rpx;
				height: 44rpx;
				display: none;
				margin: -1px;
			}
		}
		.label-2.active {
			background: #fff;
			image {
				display: block;
			}
		}
		.all {
			display: inline-block;
			line-height: 80rpx;
			margin-left: 20rpx;
		}
	}
}
</style>
